<template>
  <el-dialog
    title="修改名称"
    :width="520"
    :append-to-body="false"
    custom-class="center-detail"
    @close="handleClose"
    v-bind="$attrs"
  >
    <el-form ref="formRef" :model="form" label-width="100px">
      <el-form-item
        label="粒子名称"
        prop="name"
        :rules="[{ required: true, message: '粒子名称不能为空' }]"
      >
        <el-input v-model="form.name" placeholder="请输入"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button color="#0560FD" type="primary" @click="save">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
interface IProps {
  nodeName: string;
}

const props = withDefaults(defineProps<IProps>(), {
  nodeName: '',
});

const emit = defineEmits(['closeHandle']);

const form = ref<any>({
  name: '',
});

const formRef = ref();

onMounted(() => {
  form.value.name = props.nodeName;
});

function handleClose() {
  emit('closeHandle', false);
}

const save = () => {
  formRef.value.validate((valid: any) => {
    if (valid) {
      emit('closeHandle', true, form.value.name);
    }
  });
};
</script>

<style lang="less" scoped></style>
